<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>compass</title> 
<style type="text/css">
#demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
</style>
</head> 

<body> 
<div id="container" style="width:1050px;height:800px;position:relative;margin:0 auto; background:url(images/background_compass.png) no-repeat;">

<div style="width:414px;height:414px;top:200px;left:320px;position:absolute;argin:0 auto">
	<div id = "demo">
		<img src = "images/compass.png" width = "414" height = "414"/>
	</div>
</div>
<div style="position: absolute; z-index: 3; top: 0px; left: 900px;">
<p id="data" style="font-size:48px; font-family:'Times New Roman', Times, serif; color:#FFF">0</p>
</div>

</div>
<script>
var prev = 0;
var cur = 0;
var Img = function() {
    var T$ = function(id) { return document.getElementById(id); }
    var ua = navigator.userAgent,
        isIE = /msie/i.test(ua) && !window.opera;
    var i = prev, sinDeg = 0, cosDeg = 0, timer = null ;
    var rotate = function(target, degree) {
        //if (Math.abs(degree - prev) > 30)
            //return;
        target = T$(target);
        var orginW = target.clientWidth, orginH = target.clientHeight;
        clearInterval(timer);
        function run(angle) {
            if (isIE) { // IE
                cosDeg = Math.cos(angle * Math.PI / 180);
                sinDeg = Math.sin(angle * Math.PI / 180);
                with(target.filters.item(0)) {
                    M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); 
                }
                target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
                target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
            } else if (target.style.MozTransform !== undefined) {  // Mozilla
                target.style.MozTransform = 'rotate(' + angle + 'deg)';
            } else if (target.style.OTransform !== undefined) {   // Opera
                target.style.OTransform = 'rotate(' + angle + 'deg)';
            } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                target.style.webkitTransform = 'rotate(' + angle + 'deg)';
            } else {
                target.style.transform = "rotate(" + angle + "deg)";
            }
        }
        run(degree);
        prev = degree % 360;
        /*
        timer = setInterval(function() {
            if (i > degree - 1) {
                clearInterval(timer);
                prev = degree % 360;
            } 
            //run(i);
            i += 1;
            i %= 360;
        }, 1); 
        */
    }
    return {rotate: rotate}
}();

function updateView()
{

    timer = setInterval(function() {

        var xmlhttp;
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		cur = 0;
                cur = parseInt(xmlhttp.responseText);
		if (!isNaN(cur)) {
                	Img.rotate('demo', cur);
                	document.getElementById("data").innerHTML=cur;
                	//document.getElementById("p2").innerHTML=prev;
                	//document.write(cur);
                	//prev = cur % 360;
                	//cur %= 360;
		}
            }
        }
        xmlhttp.open("GET","compass.php?date="+ new Date().toTimeString(),true);
        xmlhttp.send();
    }, 10); 
}

window.onload = function() {
    updateView();
}
</script>

</body> 

</html> 



